<template>
  <el-backtop
    style="background-color:transparent;box-shadow: 0 0px 0px;"
    class="bc box animated"
    :class="ani"
    id="jz"
  >
    <div ref="backtop">
      <img src="~/assets/image/common/backtop.svg" alt="" />
    </div>
  </el-backtop>
</template>

<script>
import { throttle } from "common/utils";
export default {
  name: "BackTop",
  props: {},
  data() {
    return {
      ani: ""
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  created() {
    window.onscroll = throttle(this.onScroll, 300);
  },
  methods: {
    onScroll() {
      // 排除个人中心backtop的margin变化
      let whereOfPath = this.$route.path.indexOf("profile");
      // console.log(whereOfPath);
      //变量scrollTop是滚动条滚动时,距离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      let hight = Math.ceil(scrollTop + windowHeight + 10);
      if (
        (hight === scrollHeight || hight > scrollHeight) &&
        whereOfPath === -1
      ) {
        //写后台加载数据的函数
        // console.log("到底部了");
        this.ani = "bounceInDown ";
        try {
          this.$refs.backtop.style.cssText = "margin-bottom:250px";
        } catch (warn) {
          console.warn(warn);
        }
      }
      if (this.ani === "bounceInDown " && hight < scrollHeight) {
        //阻止局部滚动
        document
          .getElementById("jz")
          .addEventListener("DOMMouseScroll", function(e) {}, false);
        setTimeout(() => {
          this.ani = "bounceInUp";
          try {
            this.$refs.backtop.style.cssText = "margin-bottom:0px";
          } catch (warn) {
            console.warn(warn);
          }
        }, 300);
      }
    }
  },
  watch: {}
};
</script>
<style scoped lang="scss"></style>
